<template>
    <div class="game-tag-list" v-loading="loading">
        <el-button type="success" class="btn" @click="goDetail(0)">新建</el-button>

        <div class="table-box">
            <el-table
                :data="list"
                border
                style="width: 100%">
                <el-table-column
                    width="80"
                    label="序号">
                    <template slot-scope="scope">
                        <div class="item-td">{{scope.row.id}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="version"
                    label="版本号">
                </el-table-column>
                <el-table-column
                    min-width="200"
                    prop="updateContent"
                    label="更新文案">
                </el-table-column>
                <el-table-column
                    min-width="130"
                    label="更新方式">
                    <!-- 0不更新1普通更新2强制更新 -->
                    <template slot-scope="scope">
                        <div v-if="scope.row.updateType === 0">非强制更新不弹窗</div>
                        <div v-else-if="scope.row.updateType === 1" style="color: #67C23A;">非强制更新</div>
                        <div v-else-if="scope.row.updateType === 2" style="color: #F56C6C;">强制更新</div>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="110"
                    prop="beginTime"
                    label="发版时间">
                    <template slot-scope="scope">
                        <div class="item-td">{{scope.row.beginTime | timeInit}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="110"
                    prop="createTime"
                    label="创建时间">
                    <template slot-scope="scope">
                        <div class="item-td">{{scope.row.createTime | timeInit}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <div class="item-td">
                            <span class="table-btn" @click="goDetail(scope.row.version)">查看详情</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>

</template>

<script>
import { formatDate } from '@/utils/utils'
export default {
    data () {
        return {
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            list: [], // 标签列表
            loading: false // 查询加载loading
        }
    },

    created () {
        this.getApkList()
    },

    methods: {
        // 获取版本列表
        async getApkList () {
            this.loading = true
            let params = {
                pageIndex: this.pageNum,
                pageNum: this.pageSize,
                type: 1
            }
            let res = await this.$http.get('/apkManage/getApkList', {
                params
            })
            if (res.code === '0') {
                this.list = res.data
                this.total = res.count
                if (this.pageNum === 1) {
                    try {
                        this.mainVersion = res.data[0].version
                    } catch (err) {
                        this.mainVersion = '0.0.0'
                    }
                }
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        goDetail (version) {
            let query = {
                main: this.mainVersion
            }
            if (version) query.version = version
            this.$router.push({
                path: '/version/iOSDetail',
                query
            })
        },

        // 页容切换
        sizeChange (val) {
            this.pageNum = 1
            this.pageSize = val
            this.getApkList()
        },

        // 页码切换
        pageChange (val) {
            this.pageNum = val
            this.getApkList()
        }
    },

    filters: {
        timeInit (val) {
            if (val) {
                return formatDate(val, 'YYYY-MM-DD HH:MM:SS')
            } else {
                return '-'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .game-tag-list {
        .table-box {
            margin-top: 10px;

            .table-btn {
                color: #409EFF;
                font-size: 12px;
                cursor: pointer;
                margin-right: 10px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                &:hover {
                    opacity: .8;
                }
            }
        }

        .tools {
            margin-top: 10px;
            padding-right: 0px;
            display: flex;
            justify-content: flex-end;
        }

        .tag-editor-box {
            /deep/ .el-dialog__body {
                padding: 0 20px;
            }
            .box-card {
                margin-bottom: 20px;
                /deep/ .el-card__body {
                    padding: 10px 0;
                }
                .card-flex {
                    display: flex;
                    align-items: center;
                    .card-left {
                        flex: 1;
                    }
                    .card-right {
                        width: 100px;
                        .right-btn {
                            color: #F56C6C;
                            cursor: pointer;
                            &:hover {
                                text-decoration: underline;
                            }
                        }
                    }
                }
                .card-item {
                    margin-bottom: 10px;
                    &:last-child {
                        margin: 0;
                    }
                    .card-item-title {
                        display: inline-block;
                        padding-right: 10px;
                        width: 100px;
                        text-align: right;
                        color: #606266;
                    }
                }
            }
        }
    }
</style>
